<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>HTML5 Genetic Algorithm 2D Car Thingy - Chrome recommended</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" />
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="clearfix">
  <div class="float-left">

    <canvas id="mainbox" width="800" height="400"></canvas>

    <div class="clearfix">
      <div class="float-left">

        <div id="graphholder">
          <canvas id="graphcanvas" width="400" height="250"></canvas>
          <div class="scale" id="s100">250</div>
          <div class="scale" id="s75">187</div>
          <div class="scale" id="s50">125</div>
          <div class="scale" id="s25">62</div>
          <div class="scale" id="s0">0</div>
        </div>

      </div>
      <div class="float-left">

        <div id="topscoreholder">
          <input id="toggle-ghost" type="button" value="View top replay" /><br/>
          <div id="topscores"></div>
        </div>

      </div>
    </div>

    <div id="minimapholder">
      <!--<img src="reddot.png" id="minimapmarker" />-->
      <div id="minimapfog"></div>
      <canvas id="minimap" width="800" height="200"></canvas>
      <div id="minimapcamera"></div>
    </div>

    <div id="debug"></div>

  </div>

  <div class="float-left">

    <div id="data">
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="X8VB9NDYWQDPE">
        <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit"
               alt="PayPal - The safer, easier way to pay online!">
        <img alt="" border="0" src="https://www.paypalobjects.com/pt_BR/i/scr/pixel.gif" width="1" height="1">
      </form>
      <br/>

      <div class="buttons">
        <input id="save-progress" type="button" value="Save Population" />
        <input id="restore-progress" type="button" value="Restore Saved Population" />
        <input id="toggle-display" type="button" value="Surprise!" />
        <input id="new-population" type="button" value="New Population" />
        <input id="fast-forward" type="button" value="Fast Forward" />
      </div>

      <div>
        <label>Create new world with seed</label><br>
        <input type="text" placeholder="Enter any string" id="newseed"/>
        <input id="confirm-reset" type="button" value="Go!" />
      </div>

      <table>
        <tr>
          <td>Generation</td><td><div id="generation"></div></td>
        </tr>
        <tr>
          <td>Cars alive</td><td><div id="population"></div></td>
        </tr>
        <tr>
          <td>Distance</td><td><div id="distancemeter"></div></td>
        </tr>
        <tr>
          <td>Height</td><td><div id="heightmeter"></div></td>
        </tr>
        <tr>
          <td>Mutation rate:</td>
          <td>
            <select id="mutationrate" >
              <option value="0">0%</option>
              <option value="0.01">1%</option>
              <option value="0.02">2%</option>
              <option value="0.03">3%</option>
              <option value="0.04">4%</option>
              <option value="0.05" selected="selected">5%</option>
              <option value="0.1">10%</option>
              <option value="0.2">20%</option>
              <option value="0.3">30%</option>
              <option value="0.4">40%</option>
              <option value="0.5">50%</option>
              <option value="0.75">75%</option>
              <option value="1.0">100%</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>Mutation size:</td>
          <td>
            <select id="mutationsize" >
              <option value="0">0%</option>
              <option value="0.01">1%</option>
              <option value="0.02">2%</option>
              <option value="0.03">3%</option>
              <option value="0.04">4%</option>
              <option value="0.05">5%</option>
              <option value="0.1">10%</option>
              <option value="0.2">20%</option>
              <option value="0.3">30%</option>
              <option value="0.4">40%</option>
              <option value="0.5">50%</option>
              <option value="0.75">75%</option>
              <option value="1.0" selected="selected">100%</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>Floor:</td>
          <td>
            <select id="floor" >
              <option value="0" selected="selected">fixed</option>
              <option value="1">mutable</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>Gravity:</td>
          <td>
            <select id="gravity" >
              <option value="24.8">Jupiter (24.8)</option>
              <option value="11.2">Neptune (11.2)</option>
              <option value="10.4">Saturn (10.4)</option>
              <option value="9.81" selected="selected">Earth (9.81)</option>
              <option value="8.9">Venus (8.9)</option>
              <option value="8.7">Uranus (8.7)</option>
              <option value="3.7">Mars/Mercury (3.7)</option>
              <option value="1.6">Moon (1.6)</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>Elite clones:</td>
          <td>
            <select id="elitesize" >
              <option value="0">0</option>
              <option value="1" selected="selected">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select>
          </td>
        </tr>
      </table>

      <br>

      <input type="button" value="Watch Leader" onclick="cw_setCameraTarget(-1)"/>
      <div id="health"></div>
      <div id="cars"></div>
    </div>

  </div>
</div>


<div id="explanation">
  <h3>But what is it?</h3>
  <p>The program uses a simple genetic algorithm to evolve random two-wheeled shapes into cars over generations. Loosely
    based on <a href="http://boxcar2d.com/">BoxCar2D</a>, but
    written from scratch, only using the same physics engine (<a href="http://box2d.org/">box2d</a>).<br/>
    seedrandom.js written by <a href="http://davidbau.com/">David Bau</a>. (thanks!)</p>


  <h3>Controls</h3>
  <table>
    <tr>
      <th>Save Population</th>
      <td>Saves current population locally.</td>
    </tr>
    <tr>
      <th>Restore Saved Population</th>
      <td>Restore a previously saved population.</td>
    </tr>
    <tr>
      <th>Suprise</th>
      <td>Toggles drawing, makes the simulation faster.</td>
    </tr>
    <tr>
      <th>New Population</th>
      <td>Keeps the generated track and restarts the whole car population.</td>
    </tr>
    <tr>
      <th>Create new world with seed</th>
      <td>The same seed always creates the same track, so you can agree on a seed with your friends
        and compete. :)
      </td>
    </tr>
    <tr>
      <th>Mutation rate</th>
      <td>The chance that each gene in each individual will mutate to a random value when a new generation is
        born.
      </td>
    </tr>
    <tr>
      <th>Mutation size</th>
      <td>The range each gene can mutate into. Lower numbers mean the gene will have values closer to the
        original.
      </td>
    </tr>
    <tr>
      <th>Elite clones</th>
      <td>The top n cars that will be copied over to the next generation.</td>
    </tr>
    <tr>
      <th>View top replay</th>
      <td>Pause the current simulation and show the top performing car. Click a second time to resume
        simulation.
      </td>
    </tr>
  </table>

  <h3>Graph</h3>
  <table>
    <tr>
      <th>Red</th>
      <td>Top score in each generation</td>
    </tr>
    <tr>
      <th>Green</th>
      <td>Average of the top 10 cars in each generation</td>
    </tr>
    <tr>
      <th>Blue</th>
      <td>Average of the entire generation</td>
    </tr>
  </table>

  <h3>Genome</h3>
  <p>
    The genome consists of:
  </p>
  <ul>
    <li>Shape (8 genes, 1 per vertex)</li>
    <li>Wheel size (2 genes, 1 per wheel)</li>
    <li>Wheel position (2 genes, 1 per wheel)</li>
    <li>Wheel density (2 genes, 1 per wheel) darker wheels mean denser wheels</li>
    <li>Chassis density (1 gene) darker body means denser chassis</li>
  </ul>

  <h3>Blurb</h3>
  <p>This is not as deterministic as it should be, so your best car may not perform as well as it once did. The terrain
    gets more complex with distance.<br/>
    I'm not in the mood to deal with checking if all scripts have loaded before running, so refresh the page if things
    seem whack.</p>

  <h3>GitHub</h3>
  <p>The code is now on a <a href="https://github.com/red42/HTML5_Genetic_Cars">GitHub repository</a>. Feel free to
    contribute!</p>

  <p>Originally written by <a href="http://rednuht.org">this guy</a>, now with contributions from patient people at GitHub.</p>
</div>

<div name="minimapmarker" class="minimapmarker"></div>

<div name="healthbar" class="healthbar" onclick="cw_setCameraTarget(this.car_index)">
  <div name="health" class="health"></div>
  <div name="healthtext" class="healthtext"></div>
</div>

<script src="lib/seedrandom.js"></script>
<script src="lib/box2d.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js" ></script>
<script src="bundle.js"></script>

</body>
</html>
